<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" @click="back()">
          <img src="../../../assets/返回.png" alt="" />
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <span>运动</span>
        </div>
        <div class="div">
          <img @click="add()" src="../../../assets/蓝添加.png" alt="" />
          <span @click="add()" class="solid">新增记录</span>
        </div>
      </header>
      <!-- 日期 -->
      <div class="day">
        <div class="day-1">
          <h>请选择日期：</h>
        </div>
        <div class="day-2">
          <span style="align-items: center" @click="dateShow = true">
            <a>{{ nTime }}</a>
            <img
              style="
                width: 10px;
                height: 5px;
                margin-left: 5px;
                margin-bottom: 3px;
              "
              src="../../../assets/sortBottom.png"
              alt=""
            />
          </span>
        </div>
      </div>
    </div>
    <!-- 步数 -->
    <div class="steps">
      <div class="steps-l">
        <div class="steps-l-t">
          <h style="font-size: 13px">步数</h>
        </div>
        <div class="steps-l-b">
          <p style="margin-top: 5px">
            <h style="font-size: 17px">{{ bs }}</h>
            <h style="font-size: 13px">/12000步</h>
          </p>
        </div>
      </div>
      <div class="steps-r">
        <van-circle
          style="margin-left: 60%"
          v-model="currentRate"
          :rate="this.rate"
          :speed="100"
          :stroke-width="80"
          :text="text"
          layer-color="#E5E5E5"
          size="50px"
        />
      </div>
    </div>
    <!-- 卡路里 -->
    <div class="kcal">
      <div class="kcal-l">
        <div class="kcal-l-l">
          <div class="kcal-t">
            <h style="font-size: 13px">中高强度</h>
          </div>
          <div class="kcal-b">
            <p style="margin-top: 5px">
              <h style="font-size: 17px; font-weight: bold">{{ minute }}</h>
              <h style="font-size: 13px">分钟</h>
            </p>
          </div>
        </div>
        <div class="kcal-l-r">
          <div class="kcal-text1">
            <h style="color: #4fcc80; font-size: 13px">充足</h>
          </div>
        </div>
      </div>
      <div class="kcal-r">
        <div class="kcal-l-l">
          <div class="kcal-t">
            <h style="font-size: 13px">消耗</h>
          </div>
          <div class="kcal-b">
            <p style="margin-top: 5px">
              <h style="font-size: 17px; font-weight: bold">{{ kcal }}</h>
              <h style="font-size: 13px">千卡</h>
            </p>
          </div>
        </div>
        <div class="kcal-l-r">
          <div class="kcal-text2">
            <h style="color: #ee5021; font-size: 13px">不足</h>
          </div>
        </div>
      </div>
    </div>
    <!-- 运动记录 -->
    <van-field
	  style="margin-top:3%;"
      is-link
      type="text"
      readonly
      value="全部"
      label="运动记录"
      input-align="right"
    >
      <template #label>
        <span style="display: flex; align-items: center">
          <a class="hengGang"></a>
          运动记录
        </span>
      </template>
    </van-field>
	<!-- bike 自行车 -->
	<div class="bike">
		<div class="bike-l">
			<div class="bike-l-l">
                <van-icon name="friends-o" />
			</div>
			<div class="bike-l-r">
				<div class="bike-t">
					<h style="font-size: 13px">骑自行车</h>
				</div>
				<div class="bike-b">
					<h style="font-size: 13px">30分钟&nbsp;&nbsp;8.1千米</h>
				</div>
			</div>
		</div>
		<div class="bike-r">
			<h style="font-size: 13px">{{ biketime }}</h>
			<van-icon name="arrow" size="18" color="#999999"/>
		</div>
	</div>
	<!-- run 跑步 -->
	<div class="run">
		<div class="run-l">
			<div class="run-l-l">
                <van-icon name="friends-o" />
			</div>
			<div class="run-l-r">
				<div class="run-t">
					<h style="font-size: 13px;">跑步</h>
				</div>
				<div class="run-b">
					<h style="font-size: 13px">45分钟&nbsp;&nbsp;5.2千米</h>
				</div>
			</div>
		</div>
		<div class="run-r">
			<h style="font-size: 13px">{{ runtime }}</h>
			<van-icon name="arrow" size="18" color="#999999"/>
		</div>
	</div>
  </div>
</template>
<script>
export default {
  name: 'YunDongEChart',
  data() {
    return {
      nTime: new Date(),
      bs: 8456,
      currentRate: 0,
      rate: 70,
      minute: 35,
      kcal: 240,
	  biketime:"09:47",
	  runtime:"08:23",
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.history.go(-1)
    },
    // 新增记录跳转
    add() {
      this.$router.push({ path: '/group', query: { userid: this.userid } })
    },
  },
  mounted() {
	this.rate=this.bs/12000*100
	console.log(this.rate)
    this.nTime = this.Common.formatDate(new Date(), 'yyyy/mm/dd')
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%'
    },
  },
}
</script>
<style lang="sss" scoped>
/* header divwai div 是标题布局 */
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}

/* //日期 */
.day {
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.day-1 {
  text-align: center;
  margin-top: 20px;
  margin-left: 5%;
  font-weight: bold;
  font-size: 15px;
}
.day-2 {
  text-align: center;
  margin-top: 20px;
  margin-right: 5%;
  font-weight: bold;
  font-size: 15px;
}

/* steps步数 */
.steps {
  height: 90px;
  background-color: #fff;
  margin-top: 3%;
  margin-left: 5%;
  margin-right: 5%;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  display: flex;
}
.steps-l {
  height: 100%;
  width: 50%;
  margin-left: 5%;
}
.steps-r {
  height: 100%;
  width: 50%;
  margin-top: 18px;
}
.steps-l-t {
  color: #1da4f2;
  margin-top: 18px;
}
.steps-l-b {
  color: #1da4f2;
}

/* kcal */
.kcal {
  height: 90px;
  display: flex;
}
.kcal-l {
  width: 50%;
  background-color: #fff;
  margin-top: 3%;
  margin-left: 5%;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  display: flex;
}
.kcal-r {
  width: 50%;
  background-color: #fff;
  margin-top: 3%;
  margin-left: 1%;
  margin-right: 5%;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  display: flex;
}
.kcal-l-l {
  width: 50%;
  margin-left: 10%;
  margin-top: 10%;
}
.kcal-l-r {
  width: 50%;
  /* 水平垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.kcal-text1 {
  width: 40px;
  height: 22px;
  background-color: #d4f7e2;
  text-align: center;
  border-radius: 3px;
}
.kcal-text2 {
  width: 40px;
  height: 22px;
  background-color: #f8d1c5;
  text-align: center;
  border-radius: 3px;
}
/* 运动记录 */
.hengGang{
  width: 2px;
  height: 15px;
  background: #1da4f2;
  display: block;
  margin-right: 5px;
  border-radius: 2px;
}

/*bike自行车  */
.bike{
height: 80px;
margin-top: 3%;
margin-left: 5%;
margin-right: 5%;
background-color: #fff;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
border-radius: 10px;
display: flex;
}
.bike-l{
width: 50%;
height: 100%;
display: flex;
}
.bike-r{
width: 50%;
height: 100%;
margin-right: 5%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.bike-l-l{
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bike-l-r{
width: 70%;
height: 100%;
margin-top: 10%;
}
.bike-b{
margin-top: 10%;
}

/*run跑步  */
.run{
height: 80px;
margin-top: 3%;
margin-left: 5%;
margin-right: 5%;
background-color: #fff;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
border-radius: 10px;
display: flex;
}
.run-l{
width: 50%;
height: 100%;
display: flex;
}
.run-r{
width: 50%;
height: 100%;
margin-right: 5%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.run-l-l{
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.run-l-r{
width: 70%;
height: 100%;
margin-top: 10%;
}
.run-b{
margin-top: 10%;
}
</style>